<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人任务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>

<!-- 头部 -->
<section id="hd">
    <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
    <div class="hdr"><a href="history.html" class="a-menu"></a></div>
    <h3>个人任务</h3>
</section>
<!-- 头部 end-->


<!-- 主内容 -->
<section id="bd">

    <div class="m-txt4" v-for="e in task">
        <a class="a-change" @click="completeTask(e.tasknum)">{{!e.complete?'完成任务':'已完成'}}</a>
        <div class="pic"><img src="img/pic1.png" alt=""></div>
        <div class="txt">
            <h3 v-html="'今日任务：'+e.taskcontent"></h3>
        </div>
    </div>

    <div class="m-txt5">
        <h1>健康指引</h1>
        <span>（运动时注意的地方）</span>
        <p>进餐后需要较多的血液流到胃肠道，帮助食物消化与养分吸收，如果这时参加运动就会造成血液流向四肢，妨碍胃肠的消化，时间一长就会导致疾病。体弱者进餐后血压还会降低，称为餐后低血压，外出活动容易跌倒。</p>
        <p>
            运动不仅是身体的锻炼，也是心理的锻炼。当你生气、悲伤时，不要到运动场上去发泄。运动医学专家的解释是：人的情绪直接影响着身体的生理机能，而情绪的变化又产生于大脑深部，并扩散到全身，在心脏及其他器官上留下痕迹，这种痕迹将影响人体机能的健康。</p>
        <p>由于运动的基本功能是通过呼吸从外界摄入大量新鲜氧气，以满足健康的需求，故运动前一定要选择好地点，以平坦开阔，空气新鲜的公园、河滩、体育场等处最佳。</p>
        <p>由于运动的基本功能是通过呼吸从外界摄入大量新鲜氧气，以满足健康的需求，故运动前一定要选择好地点，以平坦开阔，空气新鲜的公园、河滩、体育场等处最佳。</p>
    </div>
    <p @click.prevent="" class="m-btn2" :class="{'m-btn2-1':!taskCompleted}">任务完成</p>
</section>
<!-- 主内容 end-->


<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var vm = new Vue({
        el: '#bd',
        data: {
            task: [],
            name: '张三',
            date: '',
            taskId: '',
            taskCompleted: false
        },
        beforeCreate: function () {
            var _ = this;
            axios.student('/task')
                .then(function (res) {
                    if (res.data.Code === 0) {
                        if (res.data.Detail.Id === 0) {

                        } else {
                            var arr = JSON.parse(res.data.Detail.TaskJson).tasks;
                            _.taskCompleted = res.data.Detail.TaskStatus === 2;
                            arr.forEach(function (e) {
                                e.taskcontent = e.taskcontent.replace(/(\d+)/, '<span>$1</span>')
                            })
                            _.task = arr;

                            var date = new Date(res.data.Detail.TaskDate);
                            _.date = date.getMonth() + 1 + '-' + date.getDate();

                            _.taskId = res.data.Detail.Id;
                        }
                    } else if (res.data.Code === 2) {
                        location.href = 'login.html?refer=' + location.href;
                    }
                })
        },
        methods: {
            completeTask: function (num) {
                var _ = this;
                if (_.task[num - 1].complete === true) {
                    return false
                }
                axios.student('/taskcomplete', {
                    id: _.taskId,
                    tasknum: num
                }).then(function (res) {
                    if (res.data.Code === 0) {
                        _.task[num - 1].complete = true
                    }
                })
            }
        }
    })
</script>
</body>
</html>